<!DOCTYPE html>
<html>
  <head>
    <script src="../../../resources/testharness.js"></script>
    <script src="../../../resources/testharnessreport.js"></script>
    <style>
      body {
        margin: 0;
        font-family: monospace;
        font-size: 15px;
        line-height: 1;
      }

      div#testArea {
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <div id="testArea">
    </div>

    <script>
      test(function() {
        var div = document.getElementById("testArea");
        div.textContent = 'a\nb\n\n\nc';

        var rects=[]
        for (var i = 0; i < div.textContent.length; ++i) {
            var range = document.createRange();
            range.setStart(div.firstChild, i);
            range.setEnd(div.firstChild, i+1);
            rects.push(range.getBoundingClientRect());
        }

        assert_greater_than(rects[2].top, rects[1].top,
                'Top of the rect of offset(2,3) should be greater than offset(1,2)')
        assert_greater_than(rects[4].top, rects[3].top,
                'Top of the rect of offset(4,5) should be greater than offset(3,4)')
        assert_greater_than(rects[5].top, rects[4].top,
                'Top of the rect of offset(5,6) should be greater than offset(4,5)')
        assert_greater_than(rects[6].top, rects[5].top,
                'Top of the rect of offset(6,7) should be greater than offset(5,6)')
      }, 'BoundingClinentRect of linebreak character should be calculated correctly');
    </script>
  </body>
</html>
